<template>
  <div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">{{row.name }}</template>
      </el-table-column>

      <el-table-column label="电话" align="center">
        <!-- scope.row   row是scope的属性    {row}=scope -->
        <template slot-scope="{row}">{{ row.phone }}</template>
      </el-table-column>

      <el-table-column label="性别" align="center">
        <template slot-scope="{row}">{{ row.sex=="0"?"男":(row.sex=="1"?"女":"保密") }}</template>
      </el-table-column>

      <el-table-column prop="inputUserName" label="录入人"></el-table-column>

      <el-table-column label="录入时间" align="center">
        <template slot-scope="{row}">{{ row.entryTime | FormaDate}}</template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template>
          <i class="el-icon-edit"></i>修改
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="display:flex;justify-content:flex-end;padding:20px 20px 0 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { GetCustomerListApi } from "@/request/api";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
      // 当前页数
      pageNum: 1,
      // 每条条数
      pageSize: 10,
      // 总计的条数
      total: null,

      // 分页数据
      // currentPage1: 5,
      // currentPage2: 5,
      // currentPage3: 5,
      // currentPage4: 4,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      const GetCustomerListApiRes = await GetCustomerListApi({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      if (!GetCustomerListApiRes) return;
      console.log(GetCustomerListApiRes);
      this.tableData = GetCustomerListApiRes.rows;
      this.total = GetCustomerListApiRes.total;
    },
    handleSelectionChange() {},

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // 当前页数改变的时候执行
      this.pageNum = val;
      this.getTableData();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
 
<style lang = "less" scoped>
</style>